<template>
    <div class="aboutUsList">
<!--         <transition name="fade">
            <loading v-if="isLoading"></loading>
        </transition> -->
       <div class="aboutTitle">
          <p class="name">
              <ul>
                 <li>{{$t('title.aboutWenno')}}</li>
                 <li><router-link  :to="{path:'/contactUs'}">{{$t('title.contactUs')}}</router-link></li>
                 <li><router-link  :to="{path:'/retail'}">{{$t('title.retail')}}</router-link></li>              
              </ul>
          </p>
       </div>
       <div class="usListBox">
         <div class="usList" v-if='!content'>
              <p>{{$t('contact.nodata')}}</p>
         </div>
         <div class="usList" v-html="content" v-else>
              {{content}} 
         </div>         
       </div>

    </div>
</template>
<script>

export default {
  name: "aboutUs",
  data () {
    return {
        name:'我要测试首页',
        content:''
    }
  },
  mounted:function(){ 
       window.scrollTo(0, 0);
  },
  methods:{
      getData(){
          this.$loading(this.$t("contact.loading"));
          let self = this;
          axios.get('/api/about-us')
          .then(function (response) {
             //console.log(JSON.stringify(response.data.about));
             self.closeLoading();
              var s ='';
              s = response.data.about.content.replace(/&amp;/g,"&");
              s = s.replace(/&lt;/g,"<");
              s = s.replace(/&gt;/g,">");
              s = s.replace(/&nbsp;/g," ");
              s = s.replace(/&#39;/g,"\'");
              s = s.replace(/&quot;/g,"\"");
              s = s.replace(/margin/gi, "m");
              s = s.replace(/text-indent/gi, "t");
              s = s.replace(/padding/gi, "p");
              // console.log(s);
              self.content = s;
          })
          .catch(function (error) {
              console.log(JSON.stringify(error));
          })  
      },
      closeLoading(){
         this.$loading.close();
      }
  },
  created:function(){
     this.getData();
  }
};
</script>
<style scoped>
   .aboutTitle{width:100%;background:#fff6e9;height:64px;line-height:64px;}
   .aboutTitle p{width:72%;margin:0px auto;text-align:left;font-size:1.45rem;color:#7b5c55;font-weight:bold;letter-spacing:0.02rem;}
   .aboutTitle p ul{width:100%;height:100%;}
   .aboutTitle p li{float:left;list-style: none;}
   .aboutTitle p li{width:30%;text-align:center;font-size:0.9rem;font-weight:normal;cursor: pointer;}
   .aboutTitle p li a{color:#7b5c55;}
   .aboutTitle p li:first-child{width:40%;text-align:left;font-size:1.41rem;color:#7b5c55;font-weight:580;}
   /*.usListBox{ min-height: 100%;display: flex;flex-direction: column;}*/
   .usList{width:72%;padding:2rem 0rem;margin:0px auto;text-align:left;color:#7b5c55;min-height:calc(100vh - 225px);}
   .usList >>>h3 ,.usList >>>h4,.usList >>>h2,.usList >>>h1,.usList>>> h3{width:100%;height:60px;line-height:60px;font-size:1.1rem;font-weight:bold;}
   .usList >>>p,.usList >>>li,.usList >>>span{display:block;width:100%;line-height:24px;font-size:0.9rem;text-align:justify;text-justify:newspaper}
   .usList img{/*width:85%;*/padding:0.5rem 0rem;display:block;max-width: 100%}
   @media screen and (max-width: 768px) {
      .imgList{width:100%;padding:0.5rem 0rem;}
      .aboutTitle p{width:90%;height:100%;}
      .aboutTitle p li{font-size:0.65rem;width:36%;}
      .aboutTitle p li:first-child{width:44%;font-size:0.9rem;}
      .aboutTitle p li:last-child{width:20%;}
      .usList{width:90%;}
      .usList >>>span{font-size:0.8rem;}
   }
</style>